<template>
    <div class="back wrapfix" @click.stop="toBack">
        <img src="/images/back.png"/>
        <span v-if="txt">{{txt}}</span>
    </div>
</template>

<script>
import { reactive, toRefs} from "vue"
import {useRouter,} from 'vue-router'
export default {
    props:['txt','to'],
    setup(props,context) {
        const router = useRouter()

        const state = reactive({
            txt:props.txt
        })

        const toBack = () =>{
            if(props.to){
                router.push(props.to)
            }else{
                router.back()
            }
        }


        return {
            ...toRefs(state),
            toBack
        }
    },
}
</script>
<style lang="scss" scoped>
    .back{
        display: inline-block;
        height: 43px;
        line-height: 43px;
        font-size: 40px;
        font-weight: bold;
        img{
            float: left;
        }
        span{
            padding: 0 0 0 8px;
        }
        &:active{
            span{
                color: #d8d2d2;
            }
        }
    }
</style>